<template>
  <div class="part">
    <Layer height="33%" v-bind="layerPost1">
      <div id="chart-part2-t1"></div>
    </Layer>
    <Layer height="67%" v-bind="layerPost2">
      <dv-scroll-board :config="layerPost2Config"/>
    </Layer>
  </div>
</template>

<script>
import Layer from './LayerItem.vue'
import { NumFormat } from '../utils'
import * as echarts from 'echarts'
export default {
  name: 'ViewPart2',
  components: { Layer },
  data() {
    return {
      data1: [
        {
          key: '项目1',
          value: 1123,
        },
        {
          key: '项目2',
          value: 1023,
        },
        {
          key: '项目3',
          value: 810,
        },
        {
          key: '项目4',
          value: 782,
        },
        {
          key: '项目5',
          value: 532,
        },
        {
          key: '项目6',
          value: 202,
        },
        {
          key: '项目7',
          value: 123,
        },
        {
          key: '项目8',
          value: 100,
        },
        {
          key: '项目9',
          value: 98,
        },
        {
          key: '项目10',
          value: 50,
        },
      ],
      data2: [
        ['项目1', 110000, 2000000],
        ['项目2', 100000, 2000000],
        ['项目3', 90000, 2000000],
        ['项目4', 80000, 2000000],
        ['项目5', 70000, 2000000],
        ['项目6', 50000, 2000000],
        ['项目7', 20000, 2000000],
        ['项目8', 9900, 2000000],
        ['项目9', 8000, 2000000],
        ['项目10', 2000, 2000000],
        ['项目11', 110000, 2000000],
        ['项目12', 100000, 2000000],
        ['项目13', 90000, 2000000],
        ['项目14', 80000, 2000000],
        ['项目15', 70000, 2000000],
        ['项目16', 50000, 2000000],
        ['项目17', 20000, 2000000],
        ['项目18', 9900, 2000000],
        ['项目19', 8000, 2000000],
        ['项目20', 2000, 2000000],
      ],
    }
  },
  computed: {
    layerPost1() {
      return {
        title: '项目排行榜TOP10',
      }
    },
    layerPost2() {
      return {
        title: '项目机时',
      }
    },
    layerPost2Config({data2}) {
      if(!data2) data2 = [];
      data2.forEach(item => {
        item[1] = NumFormat(item[1]);
        item[2] = NumFormat(item[2]);
      })

      return {
        header: ['项目名', '已用机时', '总机时'],
        oddRowBGC: "rgba(252, 255, 255, 0)",
        evenRowBGC:	"rgba(33, 241, 242, 0.05)",
        rowNum: 10,
        data: data2
      }
    }
  },
  mounted() {
    this.drawPost1(this.data1)
  },
  methods: {
    getDataPost1() {},
    getDataPost2() {},
    getDataPost3() {},
    drawPost1(data) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('chart-part2-t1'))
      // 绘制图表
      myChart.setOption({
        textStyle: {
            fontSize: "30px"
        },
        tooltip: {
          textStyle: {
            fontSize: "32px"
          },
          trigger: 'axis',
          formatter: (params) => {
            const param = params[0]
            const { axisValueLabel, value } = param;
            const newMarker = `<span style="display:inline-block;margin-right:4px;border-radius:24px;width:24px;height:24px;background-color:#3aeaeb;"></span>`
            return `${newMarker} ${axisValueLabel}  ${value}核时`
          },
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#bbb',
            },
          },
          axisLabel: {
            fontSize: "32px",
            rotate: 50,
          },
          axisTick: {
            show: false,
          },
          data: data.map(i => i.key)
        },
        yAxis: {
          type: 'value',
          name: '核*时',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#bbb',
            },
          },
          axisLabel: {
            fontSize: "30px"
          },
          splitLine: {
            lineStyle: {
              color: '#2d3036',
            },
          },
        },
        grid: {
          left: '16%',
          right: '5%',
          top: '11%',
          bottom: '16%',
        },
        series: [
          {
            data,
            type: 'bar',
            symbolSize: 0,
            lineStyle: {
              color: '#21f1f2',
            },
            itemStyle: {
              color: '#fff',
            },
            barWidth: 8,
          },
        ],
      })
    },
  },
}
</script>

<style scoped>
.part {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
